import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const ParentStack = createNativeStackNavigator();
const BottomTab = createBottomTabNavigator();
const ChildStack = createNativeStackNavigator();
const Tab1Stack = createNativeStackNavigator();

const DummyContent = () => {
  const navigation = useNavigation();

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
      }}>
      <Text style={{ marginBottom: 20, textAlign: 'center' }}>Child Stack</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
};

const ChildStackScreen = () => (
  <ChildStack.Navigator
    screenOptions={{ headerShown: false, headerLargeTitle: false }}>
    <Tab1Stack.Screen name="ChildStack" component={BottomStackScreen} />
  </ChildStack.Navigator>
);

const Another = () => (
  <ChildStack.Navigator
    screenOptions={{ headerShown: true, headerLargeTitle: false }}>
    <Tab1Stack.Screen name="ChildStack1" component={InitialScreen} />
  </ChildStack.Navigator>
);

const AnotherBottomTabs = () => (
  <BottomTab.Navigator
    screenOptions={{ headerShown: false }}
    detachInactiveScreens={true}>
    <BottomTab.Screen name="Tab2" component={ChildStackScreen} />
  </BottomTab.Navigator>
);

const BottomStackScreen = () => (
  <BottomTab.Navigator
    screenOptions={{ headerShown: false }}
    detachInactiveScreens={true}>
    <BottomTab.Screen name="Tab1" component={Another} />
  </BottomTab.Navigator>
);

const InitialScreen = () => {
  const navigation = useNavigation();

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
      }}>
      <Button title="Click" onPress={() => navigation.navigate('Bottom')} />
    </View>
  );
};

const App = () => (
  <NavigationContainer>
    <ParentStack.Navigator>
      <ParentStack.Screen
        name="Initial"
        component={BottomStackScreen}
        options={{
          headerShown: false,
          animation: 'default' /** set none to fix */,
        }}
      />
      <ParentStack.Screen
        name="Bottom"
        component={ChildStackScreen}
        options={{ headerShown: false }}></ParentStack.Screen>
    </ParentStack.Navigator>
  </NavigationContainer>
);

export default App;
